<template>
  <f7-page name="songListDetail" color-theme="red" class="backgroundColor" @page:afterin="pageAfterin">
    <div class="navbarSongListDetail">
      <div class="navbar_l" @click="$f7router.back()">
        <f7-button>
          <svg-icon iconClass="horn_down_white" v-if="getThemeDark" />
          <svg-icon iconClass="horn_down" v-else />
        </f7-button>
      </div>
      <div class="navbar_m">
        <div class="mText">
          <span class="titleColor">歌单详情</span>
        </div>
      </div>
      <div class="navbar_r"></div>
    </div>
    <v-songCatalog
      :songListId="songListItemForCatalog.id"
      :listData="songListItemForCatalog"
      :from="from"
      :tRef="index.toString()"
      :id="from + index"
      :listHeight="listHeight"
    />
    <!-- footer -->
    <div class="footer_box">
      <v-playerBar :hasMusicList="getPageGradation>1?true:false" :from="from"/>
    </div>
  </f7-page>
</template>
<script>
import SongCatalog from '@/components/songcatalog.vue'
import { mapActions, mapGetters } from 'vuex'
import PlayerBar from '@/components/playerbar.vue'
export default {
  components:{
    'v-songCatalog':SongCatalog,
    'v-playerBar': PlayerBar,
  },
  data(){
    return {
      songListItemForCatalog:{},
    }
  },
  props:{
    from:{
      type:String,
      default:'',
    },
    songListItem:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    listHeight:{
      type:String,
      default:'54vh'
    },
    index:{
      type:Number,
      default:0,
    }
  },
  watch:{
    songListItem:{
      handler(val){
        this.songListItemForCatalog = {
          id:val.songListId?val.songListId:val.id,
          name:val.songListName?val.songListName:val.name,
          createDate:val.sharedTime?val.sharedTime:val.createDate,
          updateDate:null,
          userId:val.userId,
        }
      },
      deep:true,
      immediate:true,
    }
  },
  computed: {
    ...mapGetters({
      getThemeDark: 'getThemeDark',
      getPageGradation:'getPageGradation',
    }),
   
  },
  methods:{
    ...mapActions({
      changePageGradation:'changePageGradation',
    }),
    pageAfterin(){
      if (this.from === 'search'){
        this.changePageGradation(2);
      }
      else if (this.from === 'songCard'){
        this.changePageGradation(3);
      }
      else if (this.from === 'home'){
        this.changePageGradation(1)
      }
      else if (this.from === 'shared'){
        this.changePageGradation(2);
      }
    },
  },
}
</script>
<style lang="scss" scoped>

.navbarSongListDetail {
  display: flex;
  align-items: center;
  height: 9vh;
  .navbar_l {
    width: 12vw;
    .svg-icon {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .navbar_m {
    flex: 1;
    width: 72vw;
    margin-left: 1vw;
    span {
      font-size: 18px;
      white-space: nowrap;
    }
    .mText {
      width: 72vw;
    }
  }
}
.footer_box {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index:1000;
}
</style>
